<template>
	<view class="content">
		<u-toast ref="uToast" />
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		<view class="bg_img">
			<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/loginBg.png" mode=""></image>
		</view>
		<view class="login_main box_radius">
			<view class="login_title">教管云管控</view>
			<view style="padding: 0 50rpx;">
				<u-tabs :list="tabsList" :is-scroll="false" :current="current" @change="tabChange" font-size="24" active-color="#000000" inactive-color="#606266"></u-tabs>
			</view>
			<view class="" v-show="current===1" style="padding: 0 50rpx;">
				<u-form :model="userForm" :rules="rules" ref="uForm">
					<u-form-item prop="username" label-width="20rpx" :border-bottom="false">
						<view class="box box-align-center logInput">
							<view class="inputImage">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/login1.png" mode=""></image>
							</view>
							<u-input placeholder="请输入手机号码" v-model="userForm.username" style="width: 100%" placeholder-style="font-size:20rpx;color:#a9a9a9" :custom-style="{'font-size': '20rpx'}" />
						</view>
					</u-form-item>
					<u-form-item prop="password" label-width="20rpx" :border-bottom="false">
						<view class="box box-align-center logInput">
							<view class="inputImage">
								<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/login2.png" mode=""></image>
							</view>
							<u-input type="password" v-model="userForm.password" placeholder="请输入密码" placeholder-style="font-size:20rpx;color:#a9a9a9" style="width: 100%;" :custom-style="{'font-size': '20rpx'}" />
						</view>
					</u-form-item>
				</u-form>
				<u-button class="enter" :custom-style="enter" @click="getlogin">登录</u-button>
			</view>

			<view class="" v-show="current===0" style="padding: 0 50rpx;">
				<!-- 验证码登录start -->
				<verification @obtainSf="obtainSf" :identity="identity" :policy="policy"></verification>
				<!-- 验证码登录end -->
			</view>
		</view>
		<view class="box box-align-center box-pack-center agreement" style="width: 100%;">
			<u-checkbox-group style="width:40rpx">
				<u-checkbox v-model="policy"></u-checkbox>
			</u-checkbox-group>
			若手机号未注册将进入注册流程，注册即为同意<div class="agreement_text" @click="gotoTreatys">《服务协议》</div>
		</view>
	</view>
</template>

<script>
	import {
		login,
		codeLogin,
		getLoginCode
	} from '@/api/login.js'
	import verification from './components/verificationCode.vue'
	import { mapMutations, mapActions, mapGetters } from 'vuex'

	export default {
		components: {
			verification
		},
		data() {
			return {
				tabsList: [{
					name: '验证码注册/登录'
				}, {
					name: '密码登录'
				}],
				current: 0,
				userForm: {
					username: '',
					password: '',
					type_id: 4
				},
				rules: {
					username: [{
						required: true,
						message: '请输入手机号码',
						trigger: ['blur']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['change'],
					}]
				},
				policy: false,
				enter: {
					color: '#FFFFFF',
					'background-color': '#4880ff',
					'letter-spacing': '8rpx',
					'border-radius': '20rpx',
					'line-height': '80rpx',
					overflow: 'hidden',
					'font-weight': '600',
					'margin-top': '30rpx'
				},
				list: [{
					value: '2',
					label: '家长'
				}],
				show: false,
				identity: '家长'
			}
		},

		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			...mapMutations(['LOGIN']),
			confirm(e) {
				this.identity = e[0].label
				console.log(this.identity);
			},
			tabChange(index) {
				this.current = index;
			},
			gotoTreatys() {
				uni.navigateTo({
					url: '/pages_subpackage/treatys/index'
				})
			},
			//登录
			getlogin() {
				if (!this.policy) return this.$refs.uToast.show({
					title: '请先阅读并勾选协议',
					icon: false,
					type: 'error',
				})
				this.$refs.uForm.validate(valid => {
					if (valid) {
						login(this.userForm).then(res => {
							this.LOGIN(res.data)
							if (res.data.sn.length) {
								this.$refs.uToast.show({
									title: '登录成功',
									icon: false,
									type: 'success',
									isTab: true,
									url: '/pages/my/index'
								})
							} else {
								//跳转至绑定教程
								uni.navigateTo({
									url: '/pages_subpackage/addTablet/bindTutorial/index'
								})
							}
						}).catch(err => {
							this.$refs.uToast.show({
								title: err.msg,
								type: 'error',
								icon: false
							})
						})
					} else {
						return false
					}
				});
			},
			obtainSf() {
				this.show = !this.show
			},
		}
	}
</script>

<style scoped>
	/deep/ .u-input--border {
		border-radius: 50px;
	}
</style>

<style lang="scss">
	.swiper-box {
		flex: 1;
		height: 400rpx;
	}

	.swiper-item {
		height: 100%;
	}

	page {
		height: 100%;
	}

	.content {
		height: 100%;
		padding: 1rpx 20rpx 0 20rpx;

		.bg_img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;

			image {
				height: 100%;
				width: 100%;
			}
		}

		.login_image {
			position: absolute;
			height: 60px;
			width: 50%;
			left: 50%;
			top: 10%;
			transform: translate(-50%, 0);

			image {
				height: 100%;
				width: 100%;
			}
		}

		.login_main {
			position: absolute;
			width: 80%;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);

			padding: 20rpx 0;

			.login_title {
				text-align: center;
				font-size: 48rpx;
				letter-spacing: 2px;
				font-weight: 600;
				color: #333333;
				margin-bottom: 80rpx;
			}
		}
	}

	.enter {
		background-color: #60adff;
		letter-spacing: 8rpx;
		border-radius: $uni-border-radius-lg;
		line-height: 80rpx;
		overflow: hidden;
		color: #FFFFFF;
		font-weight: 600;
	}

	.agreement {
		font-size: 12px;
		color: #606060;
		margin-top: 30rpx;
		position: absolute;
		bottom: 10%;
		left: 50%;
		transform: translate(-50%, 0);

		.agreement_text {
			color: #1b97ef
		}
	}

	.establish {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 40rpx;

		.goestablish {
			color: #333333;
			font-size: 32rpx;
		}

		.establish_text {
			color: #333333;
		}
	}

	.logInput {
		border: 1px solid #f2f1f1;
		border-radius: $uni-img-size-sm;
		padding: 0 20rpx;
		background-color: #f2f1f1;

		.inputImage {
			margin-right: 10rpx;
			height: 40rpx;
			width: 40rpx;

			image {
				height: 100%;
				width: 100%;
				margin-bottom: 4rpx;
			}
		}
	}
</style>